<template>
    <rx-layout>
        <div slot="center" style>
            <rx-fit>
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <div class="table-operator">
                        <rx-button alias="formQrcodeConfigAdd" :butn-icon="'plus'" :butn-type="'primary'"
                                   :show-no-right="true" @click="add">
                            {{$ti18('rxList.newBtn',"新建")}}
                        </rx-button>
                        <a-dropdown
                            v-if="editEnable && selectedRowKeys.length > 0 || removeEnable && selectedRowKeys.length > 0">
                            <a-button style="margin-left: 8px">
                                {{$ti18('rxList.moreBtn','更多')}}
                                <a-icon type="down"/>
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item key="1" v-if="editEnable && selectedRowKeys.length > 0"
                                             alias="formQrcodeConfigEdit" :butn-icon="'edit'"
                                             :butn-type="'primary'" :show-no-right="false" @click="editOne">
                                    <a-icon type="edit"/>
                                    {{$ti18('rxList.editBtn',"编辑")}}
                                </a-menu-item>
                                <a-menu-item key="2" v-if="removeEnable && selectedRowKeys.length > 0"
                                             alias="formQrcodeConfigDelete" :butn-icon="'delete'" :butn-type="'danger'"
                                             :show-no-right="false" @click="delByIds(selectedRowKeys)">
                                    <a-icon type="delete"/>
                                    {{$ti18('rxList.delBtn','删除')}}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                </div>
                <rx-grid
                    ref="table"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-form/form/core/formQrcodeConfig/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','30','40']"
                    id-field="id"
                    @selectChange="onSelectChange"
                >
                     <span slot="loginType" slot-scope="{text, record, index}">
                      <a-tag :color="loginTypeMap[text].color">
                        <span>{{loginTypeMap[text].text}}</span>
                      </a-tag>
                    </span>
                    <span slot="expireType" slot-scope="{text, record, index}">
                      <a-tag :color="expireTypeMap[text].color">
                        <span>{{expireTypeMap[text].text}}</span>
                      </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span  @click.stop="edit(record)">
                            {{$ti18('rxList.editBtn',"编辑")}}
                        </span>
                        <span  @click.stop="delByIds([record.id])">
                            {{$ti18('rxList.delBtn','删除')}}
                        </span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import FormQrcodeConfigApi from '@/api/form/core/formQrcodeConfig'
import FormQrcodeConfigEdit from './FormQrcodeConfigEdit'
import {BaseList, RxFit, RxGrid} from "@lowcode/jpaas-common-lib";

export default {
    name: 'FormQrcodeConfigList',
    mixins: [BaseList],
    components: {
        RxFit
    },
    props:["alias","allowNotLogin"],
    data() {
        return {
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 50,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {title: this.i18n('form.loginType','登录类型'), dataIndex: 'loginType', width: 100, scopedSlots: {customRender: 'loginType'}},//(0：无需登录，1：需要登录)
                {title: this.i18n('form.expireType','过期类型'), dataIndex: 'expireType', width: 100, scopedSlots: {customRender: 'expireType'}},//(0:永不过期，1：设置过期时间，2：时间段(开始~结束))
                {title: this.i18n('form.startTime','开始时间'), dataIndex: 'startTime', width: 100},
                {title: this.i18n('form.endTime','结束时间'), dataIndex: 'endTime', width: 100},
                {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
            ],
            component: FormQrcodeConfigEdit,
            comment: this.i18n('list.qrcodeConfig','表单方案二维码配置'),
            widthHeight: ['1068px', '650px'],
            fitSearch: false,
            loginTypeMap: {
                0: {color: 'green', text: this.i18n('loginMap.nlogin','无需登录')},
                1: {color: 'blue', text: this.i18n('loginMap.needLogin','需要登录')},
            },
            expireTypeMap: {
                0: {color: 'green', text: this.i18n('expireMap.neverExpire','永不过期')},
                1: {color: 'blue', text: this.i18n('expireMap.expirTime','设置过期时间')},
                2: {color: 'orange', text: this.i18n('expireMap.timePeriod','时间段(开始~结束)')},
            },
        }
    },
    created() {
        if(this.alias){
            this.queryParam.Q_FORM_ALIAS__S_EQ=this.alias;
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formQrcode",key);
        },
        delById(ids) {
            return FormQrcodeConfigApi.del({ids: ids.join(',')});
        },
        getListByParams(parameter) {
            return FormQrcodeConfigApi.query(parameter)
        },
        add(){
            var conf = {
                component: this.component,
                title: this.$ti18('rxList.newBtn','添加')+"-" + this.comment,
                urlType: 'Add',
                widthHeight: this.widthHeight,
                data:{alias:this.alias,allowNotLogin:this.allowNotLogin}
            };
            this.handleEdit(conf);
        }
    }
}
</script>
<style scoped>

</style>

